<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>818苏泊尔</title>
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="js/share.js"></script>
    <!--<div style="display: none;">-->
        <!--<script src="https://s19.cnzz.com/z_stat.php?id=1263576839&web_id=1263576839" language="JavaScript"></script>-->
    <!--</div>-->
    <!--JS-->
    <script type="text/javascript">
        function getpw(){return $(window).width();}
        function getph(){return $(window).height();}
        function setfontsize(){
            wiw=getpw();
            wih=getph();
            fz = (wiw/750);
            $('html').css('font-size', fz*100);
        }
//        加载页加载代码start
        function loadtxt(i){
            $(".loadding-i i").text(i);
            i++;
            if(i<101){
                setTimeout(function(){
                    loadtxt(i);
                },10);
            }else{
                $(".loadding_box").hide();
                $(".swiper-wrapper").css("display","block");
                audio();

            }
        }
//          加载页加载代码end
        function loads(){
            setfontsize();

            var wh = $(window).height();
            var ww = $(window).width();
            $(".wrap,.swiper-wrapper,.swiper-slide,.mc_box,.text_box,.coupon_box,.info_box,.reply_box,.loadding_bg img").height(wh).width(ww);

            $(window).on("resize",function(){
                setfontsize();
                $(".wrap,.swiper-wrapper,.swiper-slide,.mc_box,.text_box,.coupon_box,.info_box,.reply_box,.loadding_bg img").height(wh).width(ww);
                setTimeout(function(){setfontsize();},300);
            })
        }



        $(function(){
            loadtxt(1);
            loads();
            var index =0;
            var wh = $(window).height();
            var ww = $(window).width();
            var b =[];
            var box = $(".swiper-wrapper .swiper-slide");
            box.each(function(i, k) {
                var className = $(k).attr("name").replace("",".");
                b.push(className)

            });

            $(".swiper-slide").css("left",$(window).width()+"px");
            $(".swiper-wrapper .swiper-slide").eq(0).css("left","0px");

            //左右滑，判断
            $('.swiper-wrapper').bind("touchstart", function (e) {
                this.x1=e.originalEvent.changedTouches[0].pageX;
            });
            $('.swiper-wrapper').bind("touchend", function (e) {

                this.x2=e.originalEvent.changedTouches[0].pageX;

                if (this.x1>this.x2) {
                    if (index == b.length-1 ) {
                        return;
                    }
                    $(b[index]).animate({left:-($(window).width())+"px"},"100");
                    $(b[index+1]).animate({left:'0px'},"100");
                    index ++;
                }

                if (this.x1<this.x2) {
                    if (index == 0 ) {
                        return;
                    }
                    $(b[index]).animate({left:($(window).width())+"px"},"100");
                    $(b[index-1]).animate({left:'0px'},"100");
                    index--;

                }


               if(index==1){
                    $('.page1 .p_img').attr("src","images/supor_p1.gif");
               }
               if(index==2){
                   $('.page2 .p_img').attr("src","images/supor_p2.gif");
               }
               if(index==3){
                   $('.page3 .p_img').attr("src","images/supor_p3.gif");
               }
                if(index==4){
                    $('.page4 .p_img').attr("src","images/supor_p4.gif");
                }
                if(index==5){
                    $('.page5 .p_img').attr("src","images/supor_p5.gif");
                }
                if(index==6){
                    $('.page6 .p_img').attr("src","images/supor_p6.gif");
                }

            });
        });
    </script>
    <!--CSS-->
    <style type="text/css">
        body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td {margin:0;padding:0;}
        body{ margin:0 auto;  color: #666666;}
        ul, ol {list-style:none;}
        a {text-decoration:none;margin:0;padding:0;}
        a:hover {text-decoration:none;}
        img {border:0; vertical-align: top;}
        table {border-collapse:collapse;border-spacing:0;}
        *:focus{outline: none;}
        .swiper-wrapper{ position: relative; overflow: hidden; }
        .swiper-slide{ position: absolute;  top: 0px; overflow: hidden; }
        .wrap{ overflow: hidden;  }

/*我写的代码*/
        /*loading页*/
        .loadding_box{ width:100%; height:100%;}

        .loadding-i i{ font-style:normal;}
        .swiper-wrapper{
            display:none;
        }
        .loadding_content{
            position: relative;
        }
        .loadding-i{ font-size:0.28rem; color:#ff7b00; margin-top: 0.1rem;
            position: absolute;
            left:46%;
            top:55%;
        }
        @keyframes loadpage {
            0%{
                width:0rem;
                height:0.19rem;
            }
            100%{
                width:2.02rem;
                height:0.19rem;
            }
        }
        @-webkit-keyframes loadpage {
            0%{
                width:0rem;
                height:0.19rem;
            }
            100%{
                width:2.02rem;
                height:0.19rem;
            }
        }
        @-ms-keyframes loadpage {
            0%{
                width:0rem;
                height:0.19rem;
            }
            100%{
                width:2.02rem;
                height:0.19rem;
            }
        }
        @-moz-keyframes loadpage {
            0%{
                width:0rem;
                height:0.19rem;
            }
            100%{
                width:2.02rem;
                height:0.19rem;
            }
        }
        @-o-keyframes loadpage {
            0%{
                width:0rem;
                height:0.19rem;
            }
            100%{
                width:2.02rem;
                height:0.19rem;
            }
        }
        /*内容页*/
        .p_img{
            width:7.5rem;
        }

        /*------------------------------------------------------首页    start------------------------------------------------------*/
        .page0{
            position: relative;
        }
        /*动画一*/
        .page0 .pic1{
            position:absolute;
            left:2.269rem;
            top:1.319rem;
            animation: pic1 2.5s infinite;
            -moz-animation: pic1 2.5s infinite;	/* Firefox */
            -webkit-animation: pic1 2.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic1 2.5s infinite;	/* Opera */
        }
        .page0 .pic1 img{
            width:1.29rem;
            height:1.13rem;
        }
        @keyframes pic1 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic1 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic1 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }


        /*动画二*/
        .page0 .pic2{
            position:absolute;
            left:4rem;
            top:7rem;
            animation: pic2 2s infinite;
            -moz-animation: pic2 2s infinite;	/* Firefox */
            -webkit-animation: pic2 2s infinite;	/* Safari 和 Chrome */
            -o-animation: pic2 2s infinite;	/* Opera */
        }
        .page0 .pic2 img{
            width:1.22rem;
            height:1.94rem;
        }
        @keyframes pic2 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic2 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic2 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }

        /*动画三*/
        .page0 .pic3{
            position:absolute;
            left:3.276rem;
            top:0.65rem;
            animation: pic3 2s infinite;
            -moz-animation: pic3 2s infinite;	/* Firefox */
            -webkit-animation: pic3 2s infinite;	/* Safari 和 Chrome */
            -o-animation: pic3 2s infinite;	/* Opera */
        }
        .page0 .pic3 img{
            width:0.46rem;
            height:0.98rem;
        }
        @keyframes pic3 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.32rem);
                -ms-transform: translateY(-.32rem);		/* IE 9 */
                -webkit-transform: translateY(-.32rem);	/* Safari and Chrome */
                -o-transform: translateY(-.32rem);		/* Opera */
                -moz-transform: translateY(-.32rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic3 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.32rem);
                -ms-transform: translateY(-.32rem);		/* IE 9 */
                -webkit-transform: translateY(-.32rem);	/* Safari and Chrome */
                -o-transform: translateY(-.32rem);		/* Opera */
                -moz-transform: translateY(-.32rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic3 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.32rem);
                -ms-transform: translateY(-.32rem);		/* IE 9 */
                -webkit-transform: translateY(-.32rem);	/* Safari and Chrome */
                -o-transform: translateY(-.32rem);		/* Opera */
                -moz-transform: translateY(-.32rem);		/* Firefox */
            }
        }

        /*动画四*/
        .page0 .pic4{
            position:absolute;
            left:3.78rem;
            top:1.249rem;
            animation: pic4 2.5s infinite;
            -moz-animation: pic4 2.5s infinite;	/* Firefox */
            -webkit-animation: pic4 2.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic4 2.5s infinite;	/* Opera */
        }
        .page0 .pic4 img{
            width:0.63rem;
            height:0.43rem;
        }
        @keyframes pic4 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic4 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic4 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }


        /*动画五*/
        .page0 .pic5{
            position:absolute;
            left:1.359rem;
            top:6.37rem;
            animation: pic5 2.6s infinite;
            -moz-animation: pic5 2.6s infinite;	/* Firefox */
            -webkit-animation: pic5 2.6s infinite;	/* Safari 和 Chrome */
            -o-animation: pic5 2.6s infinite;	/* Opera */
        }
        .page0 .pic5 img{
            width:1.31rem;
            height:1.09rem;
        }
        @keyframes pic5 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic5 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic5 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }

        /*动画六*/
        .page0 .pic6{
            position:absolute;
            left:2.076rem;
            top:8.28rem;
            animation: pic6 2.5s infinite;
            -moz-animation: pic6 2.5s infinite;	/* Firefox */
            -webkit-animation: pic6 2.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic6 2.5s infinite;	/* Opera */
        }
        .page0 .pic6 img{
            width:1.67rem;
            height:0.76rem;
        }
        @keyframes pic6 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic6 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic6 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }


        /*动画七*/
        .page0 .pic7{
            position:absolute;
            left:1.77rem;
            top:3rem;
            animation: pic7 3s infinite;
            -moz-animation: pic7 3s infinite;	/* Firefox */
            -webkit-animation: pic7 3s infinite;	/* Safari 和 Chrome */
            -o-animation: pic7 3s infinite;	/* Opera */
        }
        .page0 .pic7 img{
            width:1.1rem;
            height:0.84rem;
        }
        @keyframes pic7 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic7 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic7 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }

        /*动画八*/
        .page0 .pic8{
            position:absolute;
            left:2.448rem;
            top:0.869rem;
            animation: pic8 2.2s infinite;
            -moz-animation: pic8 2.2s infinite;	/* Firefox */
            -webkit-animation: pic8 2.2s infinite;	/* Safari 和 Chrome */
            -o-animation: pic8 2.2s infinite;	/* Opera */
        }
        .page0 .pic8 img{
            width:0.42rem;
            height:0.34rem;
        }
        @keyframes pic8 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic8 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic8 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }

        /*动画九*/
        .page0 .pic9{
            position:absolute;
            left:2.52rem;
            top:2.18rem;
            animation: pic9 2s infinite;
            -moz-animation: pic9 2s infinite;	/* Firefox */
            -webkit-animation: pic9 2s infinite;	/* Safari 和 Chrome */
            -o-animation: pic9 2s infinite;	/* Opera */
        }
        .page0 .pic9 img{
            width:0.45rem;
            height:0.43rem;
        }
        @keyframes pic9 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic9 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic9 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }

        /*-------------------------------------------------------首页     end------------------------------------------------------*/

        /*-----------------------------------------------------末尾页   start------------------------------------------------------*/
        .page7 .page_end{
            position: relative;
        }


        /*榨汁机动画*/
        .page7 .pic1{
            position:absolute;
            left:0rem;
            top:3.7rem;
            animation: pic-1 2.5s infinite;
            -moz-animation: pic-1 2.5s infinite;	/* Firefox */
            -webkit-animation: pic-1 2.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-1 2.5s infinite;	/* Opera */
        }
        .page7 .pic1 img{
            width:4.19rem;
            height:5.78rem;
        }
        @keyframes pic-1 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic-1 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-1 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }


        /*白饭煲动画*/
        .page7 .pic2{
            position:absolute;
            left:3.2rem;
            top:3.6rem;
            animation: pic-2 3s infinite;
            -moz-animation: pic-2 3s infinite;	/* Firefox */
            -webkit-animation: pic-2 3s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-2 3s infinite;	/* Opera */
        }
        .page7 .pic2 img{
            width:4.31rem;
            height:6.39rem;
        }
        @keyframes pic-2 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.2rem);
                -ms-transform: translateY(-.2rem);		/* IE 9 */
                -webkit-transform: translateY(-.2rem);	/* Safari and Chrome */
                -o-transform: translateY(-.2rem);		/* Opera */
                -moz-transform: translateY(-.2rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-2 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.2rem);
                -ms-transform: translateY(-.2rem);		/* IE 9 */
                -webkit-transform: translateY(-.2rem);	/* Safari and Chrome */
                -o-transform: translateY(-.2rem);		/* Opera */
                -moz-transform: translateY(-.2rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic-2 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.2rem);
                -ms-transform: translateY(-.2rem);		/* IE 9 */
                -webkit-transform: translateY(-.2rem);	/* Safari and Chrome */
                -o-transform: translateY(-.2rem);		/* Opera */
                -moz-transform: translateY(-.2rem);		/* Firefox */
            }
        }


        /*白饭煲的手动画*/
        .page7 .pic3{
            position:absolute;
            left:3.03rem;
            top:5.3rem;
            animation: pic-3 3s infinite;
            -moz-animation: pic-3 3s infinite;	/* Firefox */
            -webkit-animation: pic-3 3s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-3 3s infinite;	/* Opera */
        }
        .page7 .pic3 img{
            width:3.05rem;
            height:2.3rem;
        }
        @keyframes pic-3 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.2rem);
                -ms-transform: translateY(-.2rem);		/* IE 9 */
                -webkit-transform: translateY(-.2rem);	/* Safari and Chrome */
                -o-transform: translateY(-.2rem);		/* Opera */
                -moz-transform: translateY(-.2rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-3 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.2rem);
                -ms-transform: translateY(-.2rem);		/* IE 9 */
                -webkit-transform: translateY(-.2rem);	/* Safari and Chrome */
                -o-transform: translateY(-.2rem);		/* Opera */
                -moz-transform: translateY(-.2rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic-3 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.2rem);
                -ms-transform: translateY(-.2rem);		/* IE 9 */
                -webkit-transform: translateY(-.2rem);	/* Safari and Chrome */
                -o-transform: translateY(-.2rem);		/* Opera */
                -moz-transform: translateY(-.2rem);		/* Firefox */
            }
        }


        /*豆浆机动画*/
        .page7 .pic4{
            position:absolute;
            left:0.02rem;
            top:8.60rem;
            animation: pic-4 3.5s infinite;
            -moz-animation: pic-4 3.5s infinite;	/* Firefox */
            -webkit-animation: pic-4 3.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-4 3.5s infinite;	/* Opera */
        }
        .page7 .pic4 img{
            width:1.79rem;
            height:2.45rem;
        }
        @keyframes pic-4 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-4 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic-4 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }


        /*电饭煲的动画*/
        .page7 .pic5{
            position:absolute;
            left:4.58rem;
            top:10.07rem;
            animation: pic-5 3.5s infinite;
            -moz-animation: pic-5 3.5s infinite;	/* Firefox */
            -webkit-animation: pic-5 3.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-5 3.5s infinite;	/* Opera */
        }
        .page7 .pic5 img{
            width:1.49rem;
            height:1.34rem;
        }
        @keyframes pic-5 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-5 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic-5 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(-.3rem);
                -ms-transform: translateY(-.3rem);		/* IE 9 */
                -webkit-transform: translateY(-.3rem);	/* Safari and Chrome */
                -o-transform: translateY(-.3rem);		/* Opera */
                -moz-transform: translateY(-.3rem);		/* Firefox */
            }
        }


        /*蒸汽包动画*/
        .page7 .pic6{
            position:absolute;
            left:5.71rem;
            top:8.22rem;
            animation: pic-6 3.5s infinite;
            -moz-animation: pic-6 3.5s infinite;	/* Firefox */
            -webkit-animation: pic-6 3.5s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-6 3.5s infinite;	/* Opera */
        }
        .page7 .pic6 img{
            width:1.8rem;
            height:2.45rem;
        }
        @keyframes pic-6 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-6 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }
        @-moz-keyframes pic-6 {
            0%,100%{
                transform: translateY(0);
                -ms-transform: translateY(0);		/* IE 9 */
                -webkit-transform: translateY(0);	/* Safari and Chrome */
                -o-transform: translateY(0);		/* Opera */
                -moz-transform: translateY(0);		/* Firefox */
            }
            50%{
                transform: translateY(.3rem);
                -ms-transform: translateY(.3rem);		/* IE 9 */
                -webkit-transform: translateY(.3rem);	/* Safari and Chrome */
                -o-transform: translateY(.3rem);		/* Opera */
                -moz-transform: translateY(.3rem);		/* Firefox */
            }
        }


        /*观众*/
        .page7 .pic7{
            position:absolute;
            left:0rem;
            top:8.2rem;
        }
        .page7 .pic7 img{
            width:7.5rem;
            height:3.84rem;
        }



        /*牌子动画*/
        .page7 .pic8{
            position:absolute;
            left:2.08rem;
            top:7.4rem;
            animation: pic-8 2s infinite;
            -moz-animation: pic-8 2s infinite;	/* Firefox */
            -webkit-animation: pic-8 2s infinite;	/* Safari 和 Chrome */
            -o-animation: pic-8 2s infinite;	/* Opera */
        }
        .page7 .pic8 img{
            width:4.06rem;
            height:1.29rem;
        }
        @keyframes pic-8 {
            0%,100%{
                transform: scale(1);
                -ms-transform: scale(1);		/* IE 9 */
                -webkit-transform: scale(1);	/* Safari and Chrome */
                -o-transform: scale(1);		/* Opera */
                -moz-transform: scale(1);		/* Firefox */
            }
            50%{
                transform: scale(1.2,1.2);
                -ms-transform: scale(1.2,1.2);		/* IE 9 */
                -webkit-transform: scale(1.2,1.2);	/* Safari and Chrome */
                -o-transform: scale(1.2,1.2);		/* Opera */
                -moz-transform: scale(1.2,1.2);		/* Firefox */
            }
        }
        @-webkit-keyframes pic-8 {
            0%,100%{
                transform: scale(1);
                -ms-transform: scale(1);		/* IE 9 */
                -webkit-transform: scale(1);	/* Safari and Chrome */
                -o-transform: scale(1);		/* Opera */
                -moz-transform: scale(1);		/* Firefox */
            }
            50%{
                transform: scale(1.2,1.2);
                -ms-transform: scale(1.2,1.2);		/* IE 9 */
                -webkit-transform: scale(1.2,1.2);	/* Safari and Chrome */
                -o-transform: scale(1.2,1.2);		/* Opera */
                -moz-transform: scale(1.2,1.2);		/* Firefox */
            }
        }
        @-moz-keyframes pic-8 {
            0%,100%{
                transform: scale(1);
                -ms-transform: scale(1);		/* IE 9 */
                -webkit-transform: scale(1);	/* Safari and Chrome */
                -o-transform: scale(1);		/* Opera */
                -moz-transform: scale(1);		/* Firefox */
            }
            50%{
                transform: scale(1.2,1.2);
                -ms-transform: scale(1.2,1.2);		/* IE 9 */
                -webkit-transform: scale(1.2,1.2);	/* Safari and Chrome */
                -o-transform: scale(1.2,1.2);		/* Opera */
                -moz-transform: scale(1.2,1.2);		/* Firefox */
            }
        }


        /*z-index*/
        .page7 .pic1{
            z-index:299;
        }
        .page7 .pic2{
            z-index:199;
        }
        .page7 .pic3{
            z-index:399;
        }
        .page7 .pic4,.page7 .pic5,.page7 .pic6{
            z-index:699;
        }
        .page7 .pic7{
            z-index:599;
        }
        .page7 .pic8{
            z-index:499;
        }
        /*-----------------------------------------------------------末尾页  end-------------------------------------------------------------------------*/

        /*右滑按钮*/
        .right_ico{
            width:0.45rem;
            height:0.25rem;
            position:absolute;
            top:45%;
            left:90%;
            background:url('images/left.png') no-repeat;
            background-size:100% 100%;
            transform:rotate(270deg);
            -ms-transform:rotate(270deg); 	/* IE 9 */
            -moz-transform:rotate(270deg); 	/* Firefox */
            -webkit-transform:rotate(270deg); /* Safari 和 Chrome */
            -o-transform:rotate(270deg); 	/* Opera */


            animation:myshow 2s infinite;
            -moz-animation:myshow 2s infinite; /* Firefox */
            -webkit-animation:myshow 2s infinite; /* Safari and Chrome */
            -o-animation:myshow 2s infinite; /* Opera */
            animation-delay:2s;
            -webkit-animation-delay:2s;
        }

        @keyframes myshow
        {
            0%{opacity:0;}
            50%{opacity:0.5;}
            100%{opacity:1;}
        }

        /*音乐按钮样式*/
        .audio_image{
            position:fixed;
            left:86%;
            top:3%;
            width:0.57rem;
            z-index:99999;
        }
        .music_rotate{
            animation:musicRotate 2s linear infinite;
        }
        @keyframes musicRotate {
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        @-webkit-keyframes musicRotate {
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        @-moz-keyframes musicRotate {
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
    <!-- 加载页 -->
    <div class="loadding_box">
        <div class="loadding_content">
            <div class="loadding_bg">
                <img src="images/loading页.gif">
                <div class="loadding-i"><i>0</i>% </div>
            </div>

        </div>
    </div>
    <!-- 活动页 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide page0" name="page0">
            <img class="p_img" src="images/p0.jpg">
            <div class="pic1"><img src="images/p1.png" alt=""></div>
            <div class="pic2"><img src="images/p2.png" alt=""></div>
            <div class="pic3"><img src="images/p3.png" alt=""></div>
            <div class="pic4"><img src="images/p4.png" alt=""></div>
            <div class="pic5"><img src="images/p5.png" alt=""></div>
            <div class="pic6"><img src="images/p6.png" alt=""></div>
            <div class="pic7"><img src="images/p7.png" alt=""></div>
            <div class="pic8"><img src="images/p8.png" alt=""></div>
            <div class="pic9"><img src="images/p9.png" alt=""></div>
            <div class="right_ico"></div>
        </div>
        <div class="swiper-slide page1" name="page1">

            <img class="p_img" src="images/supor_p1.jpg">
            <div class="right_ico"></div>
        </div>

        <div class="swiper-slide page2" name="page2">
            <img class="p_img" src="images/supor_p2.jpg">
            <div class="right_ico"></div>
        </div>
        <div class="swiper-slide page3" name="page3">
            <img class="p_img" src="images/supor_p3.jpg">
            <div class="right_ico"></div>
        </div>
        <div class="swiper-slide page4" name="page4">

            <img class="p_img" src="images/supor_p4.jpg">
            <div class="right_ico"></div>
        </div>
        <div class="swiper-slide page5" name="page5">

            <img class="p_img" src="images/supor_p5.jpg">
            <div class="right_ico"></div>
        </div>
        <div class="swiper-slide page6" name="page6">

            <img class="p_img" src="images/supor_p6.jpg">
            <div class="right_ico"></div>
        </div>

        <div class="swiper-slide page7" name="page7">
                <div class="page_end">
                    <img class="p_img" src="images/bg.jpg" alt="">
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic1"><img src="images/榨汁机.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic2"><img src="images/白饭煲.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic3"><img src="images/手.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic4"><img src="images/豆浆机.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic5"><img src="images/电饭煲.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic6"><img src="images/蒸汽包.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic7"><img src="images/观众.png" alt=""></div></a>
                    <a href="http://shop.m.suning.com/app/30000176.html?utm_source=pl-00007&utm_medium=suboeryd-zhanwai0803&utm_campaign=yigou"><div class="pic8"><img src="images/牌子.png" alt=""></div></a>
                </div>
        </div>
        <!--音乐按钮-->
        <img src="images/music.png" alt="" class="audio_image music_rotate" id="#audio">
    </div>



</div>
    <audio autoplay id="audio">
        <source src="js/bg_music.mp3">
    </audio>
    <script>
        $(function() {
            $('#audio').bind('touchend',function () {
                $(this).removeClass('music_rotate');
            })

//            音频
            function audio() {
                var oAudio = document.querySelector('#audio'),
                    isPlay = false;
                //  test play
                oAudio.addEventListener('playing', function () {
                    console.log('已经播放');
                    isPlay = true;
                })

                //  iphone weixin
                document.addEventListener('WeixinJSBridgeReady', function () {
                    if (!isPlay) {
                        console.log('iphone weixin')
                        $("#audio")[0].play();
                    }
                }, false)

                //  iphone other
                $('body').one('touchstart', function () {
                    if (!isPlay) {
                        console.log('iphone other')
                        $("#audio")[0].play();
                    }
                });
                //  iphone dd
                if (dd) {
                    dd.ready(function () {
                        if (!isPlay) {

                            $("#audio")[0].play();
                        }
                        document.addEventListener('resume', function () {
                            if (!isPlay) {
                                $("#audio")[0].play();
                            }
                        })
                    })
                }
            }
        }
    </script>
</body>
</html>